<template>
<div>
  <div style="margin: 20px 0;">
    <div class="header-pc">

      <i>/</i>&nbsp;&nbsp;
      <span>查词好，翻译快！</span>
    </div>
  </div>
  <el-row>
    <el-col :span="9">
      <el-input
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 6}"
          placeholder="请输入内容"
          v-model="textarea">
      </el-input>
    </el-col>
    <el-col :span="2" style="margin: 20px 0;">
      <el-button type="primary" size="small" autocomplete="off" @click="translate" round>翻译</el-button>
    </el-col>
    <el-col :span="9">
      <el-input
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 6}"
          placeholder=""
          v-model="textarea2">
      </el-input>
    </el-col>
    <el-col :span="4">

    </el-col>
  </el-row>
  <div style="margin: 40px auto 0 10px; width:500px;text-align: center;">
    <el-descriptions title="基本信息" column="1" size="mini" :contentStyle="rowCenter" :labelStyle="rowCenter">
      <el-descriptions-item label="名称">百度翻译开放平台</el-descriptions-item>
      <el-descriptions-item label="url">
        <a ref="https://api.fanyi.baidu.com/">https://api.fanyi.baidu.com/</a>
      </el-descriptions-item>
      <el-descriptions-item label="api">
        <el-tag size="small">https://fanyi-api.baidu.com/api/trans/vip/translate</el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <div style="margin: 0 auto 0 -300px;">
      <template>
        <div>
          <a-rate allow-half>
            <a-icon slot="character" type="heart" />
          </a-rate>
        </div>
      </template>
    </div>
  </div>






</div>
</template>

<script>
export default {
  name: "TestBaidu",
  data(){
    return {
      textarea:"",
      textarea2:"",

      rowCenter:{
        "text-align":"center"
      }
    }
  },
  methods:{
    translate(){
      this.request.post("/translate/?textarea="+this.textarea).then(res=>{
        if (res.code==='200'){
          this.$message.success("翻译成功！")
          const text = JSON.parse(res.data)
          this.textarea2 = text.trans_result[0].dst
        }
        else
          this.$message.warning("请输入翻译内容！")
      })
    }
  }
}
</script>

<style scoped>
.header-pc {
  margin-bottom: 30px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
</style>